
<template>
    <div class="fd-fgcontainer">
        <appCommonHeatMap
            v-if="svgData"
            :lineStrokeColor="lineStrokeColor"
            :map-id="svgMapId"
            :svg-data="svgData"
            :map-data="mapData"
            :area-map-color="areaMapColor"
            :isShowDataText="!isPercent"
            :isXzJxz="true"
            :hasTimeline="false"
            :legendName="legendName"
            ref="map"
        ></appCommonHeatMap>
    </div>
</template>
<script>
import appCommonHeatMap from "@/components/app/map/index.vue";
export default {
    data() {
        return {
            // 图例是否是百分比
            isPercent:true,
            // 图例名称
            legendName:'复工率',
            // 地图延伸出来的线条颜色
            lineStrokeColor:'#365d8a',
            // 地图区域渲染最浅色值
            minMapFillColor:'#78b2e9',
            // 地图区域渲染最深色值
            maxMapFillColor:'#092951',
            // 地图数据
            // value代表复工率,也可以代表其他值（例如复工人数）
            mapData: [
                {   
                    district:'朝阳区',
                    mapId: "110105",
                    value: 67.03
                },
                {
                    district:'海淀区',
                    mapId: "110108",
                    value: 74.10
                },
                {
                    district:'丰台区',
                    mapId: "110106",
                    value: 65.87
                },
                {
                    district:'西城区',
                    mapId: "110102",
                    value: 66.01
                },
                {
                    district:'东城区',
                    mapId: "110101",
                    value: 57.71
                },
                {
                    district:'通州区',
                    mapId: "110112",
                    value: 44.68
                },
                {
                    district:'昌平区',
                    mapId: "110114",
                    value: 57.16
                },
                {
                    district:'石景山区',
                    mapId: "110107",
                    value: 66.18
                },
                {
                    district:'顺义区',
                    mapId: "110113",
                    value: 64.17
                },
                {
                    district:'大兴区',
                    mapId: "110115",
                    value: 49.20
                },
                {
                    district:'房山区',
                    mapId: "110111",
                    value: 53.24
                },
                {
                    district:'怀柔区',
                    mapId: "110116",
                    value: 69.18
                },
                {
                    district:'平谷区',
                    mapId: "110117",
                    value: 73.56
                },
                {
                    district:'门头沟区',
                    mapId: "110109",
                    value: 45.79
                },
                {
                    district:'延庆区',
                    mapId: "110119",
                    value: 57.98
                },
                {
                    district:'密云区',
                    mapId: "110118",
                    value: 64.17
                }
            ],

            svgData: null,
            svgMapId: "qy",
            mapId: "110000",
            areaMapColor: null
        };
    },
    components: {
        appCommonHeatMap
    },
    methods: {
        colorRgb(sColor) {
            var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
            var sColor = sColor.toLowerCase();
            if (sColor && reg.test(sColor)) {
                if (sColor.length === 4) {
                    var sColorNew = "#";
                    for (var i = 1; i < 4; i += 1) {
                        sColorNew += sColor
                            .slice(i, i + 1)
                            .concat(sColor.slice(i, i + 1));
                    }
                    sColor = sColorNew;
                }
                //处理六位的颜色值
                var sColorChange = [];
                for (var i = 1; i < 7; i += 2) {
                    sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
                }
                return sColorChange;
            } else {
                return sColor;
            }
        },
        colorHex(rgb) {
            var _this = rgb;
            var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
            if (/^(rgb|RGB)/.test(_this)) {
                var aColor = _this.replace(/(?:(|)|rgb|RGB)*/g, "").split(",");
                var strHex = "#";
                for (var i = 0; i < aColor.length; i++) {
                    var hex = Number(aColor[i]).toString(16);
                    hex = hex < 10 ? 0 + "" + hex : hex; // 保证每个rgb的值为2位
                    if (hex === "0") {
                        hex += hex;
                    }
                    strHex += hex;
                }
                if (strHex.length !== 7) {
                    strHex = _this;
                }
                return strHex;
            } else if (reg.test(_this)) {
                var aNum = _this.replace(/#/, "").split("");
                if (aNum.length === 6) {
                    return _this;
                } else if (aNum.length === 3) {
                    var numHex = "#";
                    for (var i = 0; i < aNum.length; i += 1) {
                        numHex += aNum[i] + aNum[i];
                    }
                    return numHex;
                }
            } else {
                return _this;
            }
        },
        gradientColor(startColor, endColor, step) {
            let startRGB = this.colorRgb(startColor); //转换为rgb数组模式
            let startR = startRGB[0];
            let startG = startRGB[1];
            let startB = startRGB[2];

            let endRGB = this.colorRgb(endColor);
            let endR = endRGB[0];
            let endG = endRGB[1];
            let endB = endRGB[2];

            let sR = (endR - startR) / step; //总差值
            let sG = (endG - startG) / step;
            let sB = (endB - startB) / step;

            var colorArr = [];
            for (var i = 0; i < step; i++) {
                //计算每一步的hex值
                var hex = this.colorHex(
                    "rgb(" +
                        parseInt(sR * i + startR) +
                        "," +
                        parseInt(sG * i + startG) +
                        "," +
                        parseInt(sB * i + startB) +
                        ")"
                );
                colorArr.push(hex);
            }
            return colorArr;
        },
        getLocalPath(isAbsUrl) {
            var curWwwPath = window.location.href;
            var pathName = window.location.pathname;
            var pos = curWwwPath.indexOf(pathName);
            var localhostPath = curWwwPath.substring(0, pos);
            var projectName = pathName.substring(
                0,
                pathName.substr(1).indexOf("/") + 1
            );
            return isAbsUrl ? localhostPath + projectName : "";
        },
        svgMap(mapId) {
            let _dirSvgPath = this.getLocalPath(true) + "/static/svg/";
            return `${_dirSvgPath}map-${mapId}.svg`;
        },
        createComparisonFunction(propertyName) {
            //数据排序函数
            return function(obj1, obj2) {
                var value1 = obj1[propertyName];
                var value2 = obj2[propertyName];
                //比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，
                //如果两个参数相等 则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。
                if (value1 < value2) {
                    return -1;
                } else if (value1 > value2) {
                    return 0;
                } else {
                    return 0;
                }
            };
        },
        getMapSvg(mapId, callback) {
            let _this = this;
            console.log(_this.svgMap(mapId))
            // debugger
            $.ajax({
                type: "get",
                url: _this.svgMap(mapId),
                dataType: "text",
                success: function(data) {
                    if (
                        Object.prototype.toString.call(callback) ===
                        "[object Function]"
                    ) {
                        callback(data);
                    }
                },
                error: function(data, textStatus, errorThrown) {
                    console.error("地图svg请求报错" + errorThrown);
                }
            });
        }
    },
    created() {
        this.areaMapColor = this.gradientColor(this.minMapFillColor, "#092951", 16);
        this.mapData.sort(this.createComparisonFunction("value"));
        this.mapData.forEach(function(item, index) {
            item.index = index;
        });
        this.getMapSvg("qy", data => {
            this.svgData = data;
        });
    }
};
</script>
<style>
html{
    font-size:150px;
}
body {
    background: #fff;
}
#app{
    height:100%;
}
.fd-fgcontainer {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background:#fff;
}
</style>